{%extends 'base.html'%}

{% block css %}

<style type="text/css">
    .AB {

        text-align: center;
    }

    .line-limit-length {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...

    }


    .left {
        text-align: right;
        margin: 20px;
    }
</style>

{% endblock %}

{% block body %}
<br>
<br>

<!-- 甲乙切换按钮 -->



{% if party=="B" %}
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="AB col-md-2 col-xs-6">
            <a href="/?party=A&token={{token}}" class="btn btn-default btn-lg" role="button">甲 方</a>
        </div>
        <div class="AB col-md-2 col-xs-6">
            <a href="/?party=B&token={{token}}" class="btn btn-primary btn-lg active " role="button"><span
                    class="glyphicon glyphicon-star" aria-hidden="true"></span>乙 方</a>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
{% else %}

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="AB col-md-2 col-xs-6">
            <a href="/?party=A&token={{token}}" class="btn btn-primary btn-lg active" role="button"><span
                    class="glyphicon glyphicon-star" aria-hidden="true"></span>甲 方</a>
        </div>
        <div class="AB col-md-2 col-xs-6">
            <a href="/?party=B&token={{token}}" class="btn btn-default btn-lg " role="button">乙 方</a>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

{% endif %}








<div class="left">
    <span class="label label-default">共找到100条数据</span>
</div>
<!-- 数据渲染 -->
<div class="container">
    <table class="table table-striped" style="TABLE-LAYOUT: fixed">

        <tr>
            <th width="30%">公司名称</th>
            {% if party=='A'%}
            <th>甲方需求</th>
            {% else %}

            <th width="50%">乙方资源</th>

            {% endif%}

            <th width="20%">发布时间</th>
        </tr>
        {% for i in info %}
        <tr>
            <td class="line-limit-length"><a href="/detail/{{i.id}}?token={{token}}">{{i.company_name}}</a></td>
            <td class="line-limit-length"><a href="/detail/{{i.id}}?token={{token}}">{{i.need}}</a></td>
            <td class="line-limit-length">{{i.regedate}}</td>
        </tr>

        {% endfor %}

    </table>
</div>


<nav aria-label="...">
    <ul class="pager">
        <li class="previous"><a href="/?page={{pre_page}}&party={{party}}&token={{token}}"><span aria-hidden="true">&larr;</span>
                Older</a></li>
        <li class="next"><a href="/?page={{next_page}}&party={{party}}&token={{token}}">Newer <span aria-hidden="true">&rarr;</span></a>
        </li>
    </ul>
</nav>


{% endblock %}

{% block script %}
<script>
    document.getElementById("demo").innerHTML = "需求列表";
</script>
{% endblock %}